<script setup lang="ts">
import {PropType, ShallowRef} from 'vue';

import {defineProps} from "vue";

const props = defineProps({
  gutter: {
    type: Number,
    required: false,
    default: 10,
  },
  leftRatio: {
    type: Number,
    required: false,
    default: 16,
  },
  rightRatio: {
    type: Number,
    required: false,
    default: 8,
  },
  name: {
    type: String,
    required: false,
    default: "",
  },
  description: {
    type: String,
    required: false,
    default: "",
  },
  disable: {
    type: Object as PropType<ShallowRef<boolean>>,
    required: false,
    default: false,
  },
  status: {
    type: Object as PropType<ShallowRef<any>>,
    required: false,
    default: true,
  },
  statusChange: {
    type: Function,
    required: false,
    default: null,
  },
});

// console.log("props", props);

function statusChangeEvent(currentStatue: any) {
  // console.log("statue.value", props.status.value);
  if (props.statusChange) {
    props.statusChange(props.status);
  }
}

</script>

<template>
  <el-row :gutter="props.gutter" class="setting-item-row">
    <el-col :span="props.leftRatio" class="setting-item-left">
      <div v-if="!$slots.leftSlot">
        <span class="setting-item-name">{{props.name}}</span>
        <span class="setting-item-description">{{props.description}}</span>
      </div>
      <slot name="leftSlot" v-else></slot>
    </el-col>
    <el-col :span="props.rightRatio" class="setting-item-right">
      <el-switch
          v-model="props.status.value"
          size="large"
          @change="statusChangeEvent"
          :disabled="props.disable"
          v-if="!$slots.rightSlot"
      ></el-switch>
      <slot name="rightSlot" v-else></slot>
    </el-col>
  </el-row>
</template>

<style>
.setting-item-row {
  margin: 5px 10px!important;
  padding: 10px 0 !important;
}
.setting-item-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  display: block; /* 添加这行，让其变为块级元素独占一行 */
  user-select: none;
}
.setting-item-description {
  font-size: 14px;
  color: #a1a1a1;
  margin-top: 5px;
  display: block; /* 添加这行，让其变为块级元素独占一行 */
  user-select: none;
}
.setting-item-right {
  text-align: right;
}
</style>